<!--
 * @Author: xiaobaobeibai 604070135@qq.com
 * @Date: 2021-06-15 11:09:50
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-09-20 15:08:03
 * @FilePath: /huizhou_website/src/views/home/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="index_box">
    <div>
      <headerVue></headerVue>
      <div
        class="banner_box_index"
        :style="isPhone == 'true'?'padding-top:70px':'padding-top: 115px;'">
        <!-- <img :src="bannerUrl"
          style="width:100%;"> -->
        <el-carousel
          :height="isPhone == 'false' ? '600px': '200px'"
          :indicator-position="isPhone == 'true'?'none': ''"
          arrow="always">
          <el-carousel-item
            v-for="item in bannerUrlList"
            :key="item.id">
            <img
              :src="item.imgUrl"
              :style="isPhone == 'false'?{height:'600px'}:{height:'200px'}"
              style="width:100%;">
          </el-carousel-item>
        </el-carousel>
        <div
          class="banner_text">
          <!-- <img
            src="../../assets/imgaes/banner_text_03.png"
            style="width:55%"> -->
        </div>
      </div>
    </div>
    <!-- 新闻中心 -->
    <div class="bg_box"
      :style="isPhone == 'true'?'padding:0 10px':''">
      <div class="card">
        <div class="title_bg"
          :class="isPhone == 'true' ?'phone':''">
          新闻中心
        </div>
        <div>
          <!-- <div
            class="news_title" v-if="isPhone == 'false'">
            <h3
              style="margin: 10px 0;">
              新闻动态</h3>
            <div
              style="font-size: 14px;color: #999999;">
              News</div>
          </div> -->
        </div>
        <el-row :gutter="50">
          <el-col :lg="12"
            v-loading="loadingB"
            class="news_first"
            :sm="24">
            <div
              v-if="isPhone == 'false'"
              :style="{backgroundImage:`url(${newsObj.imgUrl})`}"
              style="width: 100%;height:254px;overflow: hidden; text-align: center;vertical-align: middle; background-position: center; background-size: 100%">
              <!-- <img
                @click="gotoNews(newsObj)"
                :src="newsObj.imgUrl"
                style="width:100%"> -->
              <!-- <el-image
                @click="gotoNews(newsObj)"
                :src="newsObj.imgUrl"></el-image> -->
            </div>
            <div v-else
              style="width: 100%;height:254px;overflow: hidden; border-radius: 10px; text-align: center;">
              <!-- <img
                @click="gotoNews(newsObj)"
                :src="newsObj.imgUrl"
                style="width:100%" > -->
              <el-image
                @click="gotoNews(newsObj)"
                :src="newsObj.imgUrl"></el-image>
            </div>
            <div
              @click="gotoNews(newsObj)"
              class="news_titles_box"
              :class="isPhone == 'true'?'phone':''">
              <div
                class="news_titles"
                :class="isPhone == 'true'?'phone':''">
                {{ newsObj.title }}
              </div>
              <div
                v-if="isPhone == 'false'">
                <i class="el-icon-right"
                  style="font-size: 20px;"></i>
              </div>
            </div>
            <div
              class="news_index_content"
              :class="isPhone == 'true'?'phone':''">
              {{ newsObj.introduction }}
            </div>
            <div
              class="news_index_date"
              :class="isPhone == 'true'?'phone':''">
              {{ newsObj.time }}
            </div>
          </el-col>
          <el-col :lg="12"
            :sm="24">
            <div
              class="news_index_items"
              v-for="(item,index) in newsLists"
              :key="index"
              @click="gotoNews(item)">
              <div
                class="news_index_item">
                <div
                  :class="isPhone=='true'?'phone':''"
                  class="news_index_item_img">
                  <img
                    :src="item.imgUrl"
                    style="width: 100%;height: 100%;">
                </div>
                <div
                  class="news_index_item_content"
                  :class="isPhone == 'true'?'phone':''">
                  <div
                    class="news_index_item_title">
                    {{ item.title }}
                  </div>
                  <div
                    class="news_index_item_text">
                    {{ item.introduction }}
                  </div>
                </div>

              </div>
              <div
                class="news_index_items_date"
                :class="isPhone == 'true'?'phone':''">
                {{ item.time }}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 党的建设 -->
    <div class="bg_box"
      :style="isPhone == 'true'?'padding:0 10px':''">
      <div class="card">
        <div class="title_bg"
          :class="isPhone == 'true' ?'phone':''">
          党群工作
        </div>
        <div
          style="margin-top: 20px;">
          <el-row
            :gutter="50">
            <el-col :lg="12"
              :sm="24">
              <div
                v-if="isPhone == 'false'"
                style="width: 100%;height:300px;overflow: hidden; text-align: center;">
                <el-image
                  :src="partyObj.imgUrl"></el-image>
              </div>
              <div v-else
                style="width: 100%;height:250px;border-radius: 10px; margin-bottom: 10px; overflow: hidden; text-align: center;">
                <el-image
                  :src="partyObj.imgUrl"></el-image>
              </div>
            </el-col>
            <el-col :lg="12"
              :sm="24">
              <div
                class="party_index_text">
                {{ partyObj.introduction }}
              </div>
              <div
                class="party_flex">
                <div
                  class="party_index_item"
                  v-for="(item,index) in partyList"
                  :key="index"
                  @click="gotoPage(index)">
                  <img
                    :src="item.imagesUrl"
                    style="width:100%;margin-bottom: 10px;"
                    :style="isPhone=='true'?'height: 80px;':'height: 120px;'">
                  <div
                    :class="isPhone=='true'?'phone':''">
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 业务板块 -->
    <div class="bg_box"
      :style="isPhone == 'true'?'padding:0 10px':''">
      <div class="card">
        <div class="title_bg"
          :class="isPhone == 'true' ?'phone':''">
          业务板块
        </div>
        <div
          style="margin-top: 20px;"
          v-loading="loadingC">
          <el-row
            :gutter="20">
            <el-col :lg="8"
              :sm="24"
              v-for="(item,index) in projectList"
              :key="index">
              <div
                shadow="hover"
                :body-style="{ padding: '0px' }"
                class="project_index_box"
                :class="isPhone == 'true'?'phone':''">
                <div
                  @click="gotoPageYewu(index)"
                  class="project_index_item">
                  <img
                    class="project_index_item_img"
                    :src="item.url"
                    style="width: 100%;height: 279px;">
                  <div
                    class="project_index_text">
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 集团概况 -->
    <div class="bg_box"
      :style="isPhone == 'true'?'padding:0 10px':''">
      <div class="card">
        <div class="title_bg"
          :class="isPhone == 'true' ?'phone':''">
          集团概况
        </div>
        <div
          @click="gotoPageJituan"
          class="jituan_index_box"
          :class="isPhone == 'true'?'phone':''"
          style="margin-top: 20px;position: relative; ">
          <div
            class="jituan_index_left">
            <h3
              style="color:#ffffff;margin: 10px 0;">
              公司介绍</h3>
            <div
              style="font-size: 14px;color: #ffffff;">
              Introduce</div>
            <div
              class="jituan_index_text">
              <div
                v-html="companyProfile.concat">
              </div>

            </div>
            <img
              v-if="isPhone == 'true'"
              style="width: 100%;margin-top: 20px;border-radius: 5px;"
              :src="companyProfile.imgUrl"
              alt="">
          </div>
          <div
            class="jituan_index_right">
            <img
              :src="companyProfile.imgUrl"
              alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- 下属企业 -->
    <div class="bg_box"
      :style="isPhone == 'true'?'padding:0 10px':''">
      <div class="card">
        <div class="title_bg"
          :class="isPhone == 'true' ?'phone':''">
          下属企业
        </div>
        <div
          style="margin-top: 20px;">
          <Carousel
            v-if="isPhone == 'false'"
            :imageData="linkData"
            :superurl="linkData"
            :times="linkConfig.rotationTime"
            :type="linkConfig.type"
            :phone="isPhone" />
          <CarouselPhone
            v-if="isPhone == 'true'"
            :imageData="linkData"
            :superurl="linkData"
            :times="linkConfig.rotationTime"
            :type="linkConfig.type"
            :phone="isPhone">
          </CarouselPhone>
        </div>
      </div>
    </div>
    <Footer
      :linkDatas="linkDatas">
    </Footer>
    <BackTop></BackTop>
  </div>

</template>

<script>
import headerVue from '../../components/header_index.vue'
import Footer from '../../components/footer-index.vue'
import BackTop from '../../components/back_top'
import Carousel from '../../components/carousel.vue'
import CarouselPhone from '../../components/carouselPhone.vue'

import axios from 'axios'

export default {
  components: { headerVue, Footer, BackTop, Carousel, CarouselPhone },
  data() {
    return {
      companyProfile: {},
      bannerUrlList: [],
      scrollTop: 0,
      isActivePath: 0,
      loadingB: false,
      loadingC: false,
      isPhone: 'false',
      isActive: 0,
      partyObj: {},
      newsList: [],
      projectList: [],
      projectId: '',
      newsObj: {},
      newsLists: [],
      linkConfig: {},
      linkData: [],
      linkDatas: [],
      partyList: [
        // {
        //   name: '党的建设',
        //   url: require('@/assets/imgaes/party_icon1.png')
        // },
        // {
        //   name: '群团工作',
        //   url: require('@/assets/imgaes/party_icon2.png')
        // },
        // {
        //   name: '党风廉政建设',
        //   url: require('@/assets/imgaes/party_icon3.png')
        // }
      ]
    }
  },
  mounted() {
    this.projectParentId = this.$store.state.navList[3].id
    if (window.localStorage.getItem('isPhone')) this.isPhone = window.localStorage.getItem('isPhone')
    else this.isPhone = 'false'
    this.getNews()
    this.getHtmlBodyHeight()
    this.getBanner()
    this.getYewuList()
    this.getTextList(0)
    this.getPartyImages()
    this.getLink()
  },
  methods: {
    getLink() {
      axios.post('/home/link', {}).then(res => {
        console.log(res.data.data, 'link')
        this.linkConfig = res.data.data.conf
        this.linkData = res.data.data.friendshipLinks.filter(item => {
          return item.type == 2
        })
        this.linkData.map(item => {
          this.$set(item, 'title', item.name)
        })
        this.linkDatas = res.data.data.friendshipLinks.filter(item => {
          return item.type == 1
        })
        console.log(this.linkDatas, '0292')
      })
    },
    getTextList(isActivePath) {
      axios.post('/company/profile/selectOne', { projectId: this.$store.state.navList[1].id }).then(res => {
        this.companyProfile = res.data.data.companyProfile.filter(item => {
          if (item.type === isActivePath + 1) {
            return item.type === isActivePath + 1
          }
        })[0]
        this.companyProfile.imgUrl = 'http://img.csjs.hzsdjzyjsxx.com/' + this.companyProfile.img
      })
    },
    gotoPageJituan() {
      this.$store.commit('setOpenNav', [1, 1])
      this.$router.push({
        path: '/company_profile'
      })
      this.$store.commit('setPathIndex', '/company_profile')
    },
    getPartyImages() {
      axios.post('/party/selectList', { pageNum: 1, pageSize: 3 }).then(res => {
        this.partyList = res.data.data.parties.reverse()
        this.partyList.map(item => {
          if (item.url) {
            this.$set(item, 'imagesUrl', res.data.data.imgUrl + '/' + item.url)
          }
        })
        console.log(this.partyList, '000827270')
      })
    },
    getYewuList() {
      this.projectList = [
        {
          name: '开发建设',
          url: require('@/assets/imgaes/index_img1.png')
        },
        {
          name: '城市运营',
          url: require('@/assets/imgaes/index_img3.png')
        },
        {
          name: '城市服务',
          url: require('@/assets/imgaes/index_img2.png')
        }
      ]
    },
    getBanner() {
      axios.post('/home/img', { projectId: this.$store.state.navList[0].id }).then(res => {
        const bannerList = res.data.data.imageList
        bannerList.map(item => {
          this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
        })
        this.bannerUrlList = bannerList
      })
    },

    gotoProject(i, j) {
      this.$store.commit('setOpenNav', [i, j])
      this.$router.push({
        path: '/project_index'
      })
      this.$store.commit('setPathIndex', '/project_index')
    },
    getNews() {
      this.loadingB = true
      axios.post('/home/newNews', { pageNum: 1, pageSize: 4, type: 1 }).then(res => {
        this.newsList = res.data.data.newsList
        this.newsList.map(item => {
          this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
          // this.$set(item, 'times', item.createTime.substring(0, 11))
        })
        this.newsObj = this.newsList[0]
        this.newsLists = this.newsList.splice(1, this.newsList.length)
        this.loadingB = false
      })

      axios.post('/home/newNews', { pageNum: 1, pageSize: 1, type: 4 }).then(res => {
        const resourcesDtoList = res.data.data.newsList
        resourcesDtoList.map(item => {
          this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
          // this.$set(item, 'times', item.createTime.substring(0, 11))
        })
        if (resourcesDtoList.length > 0) {
          this.partyObj = resourcesDtoList[0]
        }
      })
    },

    gotoNews(item) {
      this.$router.push({
        path: '/news_details',
        query: {
          id: item.id
        }
      })
      this.$store.commit('setPathIndex', '/company_news')
    },
    gotoPage(index) {
      if (index == 1) {
        this.$router.push({
          path: '/party_job'
        })
        this.$store.commit('setPathIndex', '/party_job')
      } else if (index == 2) {
        this.$router.push({
          path: '/parth_builds'
        })
        this.$store.commit('setPathIndex', '/parth_builds')
      } else {
        this.$router.push({
          path: '/party_building'
        })
        this.$store.commit('setPathIndex', '/party_building')
      }
    },
    gotoPageYewu(index) {
      console.log(122)
      if (index == 0) {
        this.$router.push({
          path: '/project_index'
        })
        this.$store.commit('setPathIndex', '/project_index')
      } else if (index == 1) {
        this.$router.push({
          path: '/project_index_a'
        })
        this.$store.commit('setPathIndex', '/project_index_a')
      } else if (index == 2) {
        this.$router.push({
          path: '/project_index_b'
        })
        this.$store.commit('setPathIndex', '/project_index_b')
      }
    },
    getHtmlBodyHeight() {
      //获取滚动时的高度
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (this.scrollTop > 0) {
        this.goTop()
        this.scrollTop = 0
      }
    },
    goTop() {
      var timer = null
      cancelAnimationFrame(timer)
      timer = requestAnimationFrame(function fn() {
        var oTop = document.body.scrollTop || document.documentElement.scrollTop
        if (oTop > 0) {
          document.body.scrollTop = document.documentElement.scrollTop = oTop - 50
          timer = requestAnimationFrame(fn)
        } else {
          cancelAnimationFrame(timer)
        }
      })
    }
  }
}
</script>

<style scoped>
.banner_box_index {
  width: 100%;
  position: relative;
}
.banner_text {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg_box {
  background: #ffffff;
}
.card {
  max-width: 1200px;
  margin: 0px auto;
  padding: 30px 0;
}
.card .title_bg.phone {
  width: 80%;
  height: 36px;
  line-height: 36px;
  font-size: 18px;
}
.card .title_bg {
  margin: 0px auto;
  width: 450px;
  height: 50px;
  background: url(../../assets/imgaes/title_bg.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: 50px;
  font-size: 24px;
}
.news_titles_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.news_titles {
  font-size: 20px;
  font-weight: bold;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  height: 25px;
}
.news_titles.phone {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
  width: 100%;
}
.news_index_content {
  margin-top: 10px;
  color: #666666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 75px;
  line-height: 1.5;
  max-height: 75px;
  -webkit-line-clamp: 3;
  width: 90%;
  text-overflow: ellipsis;
}
.news_index_content.phone {
  font-size: 14px;
  height: 65px;
}
.news_index_date {
  color: #666666;
  text-align: right;
  margin-top: 10px;
}
.news_index_date.phone {
  font-size: 14px;
}
.news_first {
  padding: 10px 0;
  border-bottom: 1px solid #f1f1f1;
}
.news_first:hover {
  background: #f1f1f1;
  cursor: pointer;
}
.news_index_items {
  border-top: 1px solid #e6e6e6;
  padding: 0 20px;
}
.news_index_items:last-child {
  border-bottom: 1px solid #e6e6e6;
}
.news_index_items:hover {
  background: #f1f1f1;
  cursor: pointer;
}
.news_index_item {
  display: flex;
  align-items: center;
  flex-grow: 1;
  padding: 10px 0;
}
.news_index_item .news_index_item_img {
  width: 80px;
  height: 80px;
  flex-grow: 1;
  border-radius: 80px;
  overflow: hidden;
  margin-right: 10px;
}
.news_index_item_img.phone {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}
.news_index_item_content {
  width: calc(100% - 80px);
  flex-grow: 1;
}
.news_index_item_content .news_index_item_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.news_index_item_content .news_index_item_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.news_index_item_content.phone .news_index_item_title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.news_index_item_content .news_index_item_text {
  color: #666666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 44px;
  max-height: 44px;
  -webkit-line-clamp: 2;
  width: 100%;
  text-overflow: ellipsis;
}
.news_index_item_content.phone .news_index_item_text {
  color: #666666;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 40px;
  max-height: 40px;
  -webkit-line-clamp: 2;
  width: 100%;
  text-overflow: ellipsis;
}
.news_index_items_date {
  text-align: right;
  color: #666666;
  padding-bottom: 5px;
}
.news_index_items_date.phone {
  font-size: 14px;
}
.party_index_text {
  color: #666666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 90px;
  max-height: 90px;
  -webkit-line-clamp: 4;
  line-height: 1.4;
  width: 100%;
  text-overflow: ellipsis;
}
.party_flex {
  display: flex;
  margin-top: 40px;
  align-items: center;
  justify-content: space-between;
}
.party_index_item {
  display: flex;
  margin: 20px 10px;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  cursor: pointer;
}
.project_index_box {
  border: 0 !important;
  /* border-bottom: 1px solid #d9d9d9 !important; */
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.project_index_box.phone {
  border: 1px solid #d9d9d9 !important;
  cursor: pointer;
  margin-bottom: 10px;
}
.project_index_box.phone .project_index_text {
  display: flex;
  height: 100%;
}
.project_index_text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  z-index: 2;
  transition: all 0.5s ease-in-out;
  display: none;
  font-size: 20px;
}
.project_index_box:hover .project_index_text {
  /* padding: 10px; */
  display: flex;
  height: 100%;
}
.project_index_item_img {
  transition: all 0.5s ease-in-out;
  margin-bottom: 0;
}
.project_index_box:hover .project_index_item_img {
  transform: scale(1.1);
}
.jituan_index_left {
  width: 70%;
  height: 300px;
  padding: 40px;
  background: #192f59;
  border-radius: 10px;
}
.jituan_index_text {
  width: 70%;
  color: #ffffff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 166px;
  max-height: 166px;
  margin-top: 10px;
  line-height: 1.5;
  -webkit-line-clamp: 7;
  text-overflow: ellipsis;
}
.jituan_index_text div p span {
  color: #ffffff !important;
}
.jituan_index_right {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 40px;
  border-radius: 10px;
}
.jituan_index_box.phone .jituan_index_left {
  width: auto;
  padding: 20px;
  height: auto;
}
.jituan_index_box.phone .jituan_index_left .jituan_index_text {
  width: 100%;
}
.jituan_index_box.phone .jituan_index_right {
  display: none;
}

.party_index_item .phone {
  font-size: 14px;
}
</style>